<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Rain CSS > Util</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<link rel="stylesheet" href="icomoon/style.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="css/manhuaDate.1.0.css">
<link rel="stylesheet" type="text/css" href="lib/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="lib/tipsy/tipsy.css">
 <style>
 .container {    width: 1190px;}
.searchwrap{ transition: all .5s linear; -webkit-transition: all .5s linear; height: 25px; width: 30px; margin: 20px 0 0 35px;}
.searchwrap .searchinner{width: 238px;}
.searchwrap .searchicon{ width: 25px; height: 25px; margin-right: 10px;  border:0 none; cursor: pointer; padding: 0; background: url() no-repeat center center;}
.searchwrap .searchicon:hover{background: url() no-repeat center center; }
.searchwrap .searchbox{ margin:4px 0;  width: 200px; background: none; border:0 none; color: #fff;}
.wauto{ width: 238px!important; background: #0067a3; border-radius: 3px; }
.on{ color: red; }
.tab-fix-top{ position: fixed; top:0;}
.link .down {
  display: inline-block;
  font-size: 10px;
  width: 10px;
  color: #bbb;
  margin-left: 3px;
  transform-origin: 50% 48%;
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: transform .2s ease-in;
  -moz-transition: transform .2s ease-in;
  -o-transition: transform .2s ease-in;
  transition: transform .2s ease-in;
}
.ng-bar-node-hover .down {    transform: rotate(-180deg);    -webkit-transform: rotate(-180deg);    -moz-transform: rotate(-180deg);    -o-transform: rotate(-180deg);    -ms-transform: rotate(-180deg); }
.sn-arrow-left {
  display: inline-block;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-top: transparent 6px solid;
  border-bottom: transparent 6px solid;
  _border-top: 6px solid black;
  _filter: chroma(color=black);
  _border-bottom: 6px solid black;
  _filter: chroma(color=black);
  border-left: 6px solid #ccc;
  width: 0;
  height: 0;
  margin-top: 9px;
  margin-right: 6px;
  border-left: 6px solid #333;
  transition: all 0.2s linear;
}
/* 可伸展的 slide*/
.slidewrap li { width: 297px; background-color: #fff; overflow: hidden; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -ms-transition: all 0.1s ease;}
.bestslide { border: 1px solid #d7d7d7; margin-top: 25px;}
.bestslide .slidewrap .slideitem2 {margin-right: 0; border-right: 1px solid #d7d7d7; height: 370px;background-color: #fff; position: relative;}
.bestslide a.arrowleft{ width: 34px; height: 84px; line-height: 84px; color: #fff; text-align: center; left:0; top:145px;  background: rgba(149,149,149, 0.6); }
.bestslide a.arrowright{ width: 34px; height: 84px; line-height: 84px; color: #fff; text-align: center; right:0; top:145px;  background: rgba(149,149,149, 0.6);} 
.bestslide a.arrowleft:hover{ background: rgba(0,172,237, 0.8); }
.bestslide a.arrowright:hover{ background: rgba(0,172,237, 0.8);}
/** 带圆圈步骤进度 */
.stepbox {   border-top: 3px solid #ccc;}
.stepbox.on {   border-top: 3px solid #0097e0;}
.stepbox2.on {   border-top: 3px solid #ccc;}
.dotbox {  width: 17px;  height: 17px; text-align: center;  font-size: 12px;  line-height: 17px;  display: inline-block;  color: #fff; background-color: #999; border:1px solid #ccc; border-radius: 17px; -webkit-border-radius: 17px;}
.stepbox.on .dotbox {  background-color: #0097e0;  border:1px solid #fff;}
.stepbox.on .titlename{ color:#0097e0;}
.stepbox.on .dotbox img{ display: block;}
 </style>  
</head>
<body class="body">
	<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" target='_blank' class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" target='_blank' class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" target='_blank' class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
  </div>
	<div class="headerM headerGrey">
  	<div class="container posr">
    	<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
  </div>
  
	<div class="container mt">
      <fieldset >
          <legend >滑动加展开</legend> 
          <div id="slide2" class="slide bestslide oh posr">
            <div class="slidemain oh mlrauto">
              <ul class="j_slidewrap slidewrap lsn nop  clearfix">
                  <li class="l fl">
                    <div class="slideitem2 block tac" >
                        <img src="images/bg2.jpg" width="100%" />
                    </div>
                  </li>     
                  <li class="l fl">
                    <div class="slideitem2 block tac" >
                        <img src="images/bg2.jpg" width="100%" />
                    </div>
                  </li>     
                  <li class="l fl">
                    <div class="slideitem2 block tac" >
                        <img src="images/bg2.jpg" width="100%" />
                    </div>
                  </li>     
                  <li class="l fl">
                    <div class="slideitem2 block tac" >
                        <img src="images/bg2.jpg" width="100%" />
                    </div>
                  </li>     
                  <li class="l fl">
                    <div class="slideitem2 block tac" >
                        <img src="images/bg2.jpg" width="100%" />
                    </div>
                  </li>     
                  <li class="l fl">
                    <div class="slideitem2 block tac" >
                        <img src="images/bg2.jpg" width="100%" />
                    </div>
                  </li>     
                </ul>
            </div>
            <a href="javascript:;" id="j_arrowleft2" class="posa ib arrowleft  hide fs-2">&lt;</a>
            <a href="javascript:;" id="j_arrowright2" class="posa ib arrowright  hide fs-2">&gt;</a>
          </div>
      </fieldset>
      <div class="content">
          <div class="sidebar l posr">
            <div class="sidebox"> 
                  <div class="j_sidebar sidebar l posr"> 
                      <ul class="lsn last">
                        <li>
                          <a href="#title1" class="anchor-btn p block bglgrey2 on">定位1</a>
                          <hr class="spline">
                        </li> 
                        <li>
                          <a href="#title2" class="anchor-btn p block bglgrey2">定位2</a>
                          <hr class="spline">
                        </li>  
                      </ul>  
                      <ul class="lsn last">
                        <li>
                          <a class="title fs18px hm" href="#">伸展菜单</a> 
                        </li> 
                        <li class="j_secendtitlewrap secendtitlewrap">
                          <span class="title j_sectitle hm"><i class="sn-arrow-left"></i> 菜单1111</span>
                          <hr class="spline">
                          <div class="subwrap j_subwrap hide">
                            <a href="#" class="sub-item block hm">菜单1-1</a> 
                            <a href="#" class="sub-item block hm on">菜单1-2</a> 
                          </div>
                        </li>  
                        <li class="j_secendtitlewrap secendtitlewrap">
                          <span class="title j_sectitle hm"><i class="sn-arrow-left"></i> 菜单222</span>
                          <hr class="spline">
                          <div class="subwrap j_subwrap hide">
                            <a href="#" class="sub-item block hm">菜单2-1</a>
                          <hr class="spline">
                            <a href="#" class="sub-item block hm">菜单2-2</a> 
                          </div>
                        </li>   
                      </ul>
                  </div>
            </div>  
          </div>

          <div class="j_mainContent main mainRight posr">
              <fieldset >
                  <legend id="title1">搜索框组件</legend>
                  <div class="bgg">
                    <div class="j_searchwrap searchwrap oh">
                    <div class="searchinner  clearfix"><button  class="j_searchicon searchicon block l" ></button> <input type="text" class="j_searchbox searchbox l" /></div>
                    </div>
                  </div>
              </fieldset>

              <fieldset >
                  <legend >日期</legend>
                  <input type="text" class="ps w-10" id="starttime" name="starttime" readonly="true" />   
              </fieldset>
              
              <fieldset >
                  <legend >下拉菜单</legend> 
                  <div class="j_linksbox link ib posr">
                    <a href="javascript:void(0);" class="ib bb">
                      <span>网站导航</span> <span class="ng-iconfont down imooc-icon">&#xea43;</span> 
                    </a>
                    <div class="j_sitenav ng-sn-site-nav posa oh  w-10 bglgrey2" style="display: none;">
                      <a href="#" class=" block p bb">菜单菜单</a>
                      <a href="#" class=" block p bb">菜单菜单</a>
                      <a href="#" class=" block p bb">菜单菜单</a>
                    </div>
                  </div>
              </fieldset>
              
              <fieldset >
                  <legend >字数控制</legend> 
                  <textarea name="miaosu"  id="miaosu" style="width:700px; height:100px; " maxlength="200" placeholder="问题描述" holder=""></textarea>
                  <p class="tar"><span class="j-limit grey">5-50字</span></p>
              </fieldset>
              
              <fieldset >
                  <legend >日期控制</legend> 
                  <input type="text" class="text" date-range-picker="dateOption" id="daterangebox">
              </fieldset> 

              <fieldset >
                  <legend >地址联动</legend> 
                  省：<select id="cmbProvince"></select>
                  市：<select id="cmbCity"></select>
                  区：<select id="cmbArea"></select>
                    <div class="j_sresult">
                      <span class="j_cityitem cityitem rounds b pss">武汉 <a href="javascript:;" class="j_removecity ib c9">x</a></span>
                    </div>
                  <div>
                  省：<select id="Select1"></select>
                  市：<select id="Select2"></select>
                  区：<select id="Select3"></select>
                  </div>
              </fieldset>
              
              <fieldset >
                  <legend >数字跳动累加</legend> 
                  <span id="oSpan" style=" color:red;">1</span>
                  <br>
                  <button id="runnumbtn">开始</button>
              </fieldset>
              
              <fieldset >
                  <legend >tooltip</legend> 
                  <a href="https://github.com/jaz303/tipsy" id="tooltip1" original-title="Tipsy is a jQuery plugin for creating a Facebook-like tooltips,Tipsy is a jQuery plugin for creating a Facebook-like tooltips">tooltip</a> 
              </fieldset>
              <fieldset>
                  <legend >数据双向绑定</legend> 
                  <input type="text" data-bind-test="name" />
                  <input type="text" data-bind-test="name" />
                  <span data-bind-test="name"></span>
              </fieldset>
              <fieldset> 
                    <legend >带圆圈步骤进度</legend> 
                    <div class="pl-3 pr-3 css3_flexbox"> 
                        <div class="wf-20 posr stepbox on">
                          <span class="posa dotbox " style="left:-2px; top:-10px;">1
                          <!-- <img src="images/icon57.png" class="posa fullh fullw hide" style="left:0; top:0; "> -->
                          </span>
                          <p class="pt fs10px tac titlename" style="margin-left:-40px;">步骤1</p>
                        </div>
                        <div class="wf-20 posr stepbox stepbox2 on"> 
                          <span class="posa dotbox" style="left:-2px; top:-10px;">2
                          <!-- <img src="images/icon57.png" class="posa fullh fullw hide" style="left:0; top:0; "> -->
                          </span>
                          <p class="pt fs10px titlename" style="margin-left:-15px;">步骤2</p>
                        </div>
                        <div class="wf-20 posr stepbox">
                          <span class="posa dotbox" style="left:5px; top:-10px;">3</span>
                          <p class="pt fs10px titlename" style="margin-left:-8px;">步骤3</p>
                        </div>
                        <div class="wf-20 posr stepbox">
                          <span class="posa dotbox" style="left:14px; top:-10px;">4</span>
                          <p class="pt fs10px titlename" style="margin-left:10px;">步骤4</p>
                        </div>
                        <div class="wf-10 posr stepbox">
                          <span class="posa dotbox" style="right:-2px; top:-10px;">5</span>
                          <p class="pt fs10px   titlename" style="margin-right:-40px;">步骤5</p>
                        </div> 
                    </div>
              </fieldset>

              <p id="title2" style="padding-top:500px; height:500px;  ">内容2</p>
          </div>
      </div> 


    <footer class="footer socialFooter c borderTop">
      <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
      <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
    </footer>  
	</div>
<script type="text/javascript" src='js/jquery-1.7.2.js'></script>
<script type="text/javascript" src='js/util.js'></script>
<script type="text/javascript" src='js/slide.js'></script>
<script type="text/javascript" src="js/manhuaDate.1.0.js"></script>
<script type="text/javascript" src="lib/daterangepicker/moment.js"></script>
<script type="text/javascript" src="lib/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="lib/address/jsAddress.js"></script>
<script type="text/javascript" src="lib/tipsy/jquery.tipsy.js"></script>
<script type="text/javascript">
util.ob = $({});
$.subscribe = function () {
  util.ob.on.apply(util.ob, arguments);
};

$.unsubscribe = function () {
  util.ob.off.apply(util.ob, arguments);
};

$.publish = function () {
  util.ob.trigger.apply(util.ob, arguments);
};

//return util;
//观察者模式
//发布者
function Publisher(){
  this.subscribers = [];
};
//发布方法
Publisher.prototype.deliver = function(data){
  this.subscribers.forEach(function(fn){
    fn(data);
  });
  return this;
};
//订阅函数
Function.prototype.subscribe = function(publisher){
  var that = this;
  var alreadyExists = publisher.subscribers.some(function(el){
    return el===that;
  });
  if(!alreadyExists){
    publisher.subscribers.push(this);
  }
  return this;
};
//取消订阅
Function.prototype.unsubscribe = function(publisher){
  var that = this;
    //log(publisher.subscribers);
  publisher.subscribers = publisher.subscribers.filter(function(el){
    //log(el);
    return el !==that;
  });
  return this;
};
//回调函数
function handle(e, a) {
    console.log(a);
};
//订阅
$.subscribe("/some/topic", handle);
//发布
$.publish("/some/topic", ["dsfkdshfkdshfkhsdj"]); // 输出abc

//用法
var NewYorkTimes = new Publisher;
var sdfds = new Publisher;
var Joe = function(from) {
    console.log('joe收到 '+from);
};
Joe.subscribe(NewYorkTimes).subscribe(sdfds);
NewYorkTimes.deliver('NewYorkTimes 报纸');
sdfds.deliver('好乱七八糟的 报纸');
Joe.unsubscribe(NewYorkTimes);
//获取base64编码图片
var img =util.cacheImg({src:"images/logo.png",width:200,height:70},"image/png", function(img){
	log(img.src);
	$("body").append(img);
});

$(document).one('hidden.bs.modal', function() {
          log(1434324);      
});
$(document).trigger('hidden.bs.modal');

//搜索框组件
window.Common = {};
Common.searchbox = function(callback){
  this.init(callback);
}
Common.searchbox.prototype = {
  init: function(callback){
      var me = this;
      me.searchbox = $('.j_searchbox');
      me.registerEvent(callback);
  },
  registerEvent: function(callback){
      var me = this;
      var searchbox = me.searchbox;
      $(".j_searchicon").on("click", function(){
        $(".j_searchwrap").toggleClass("wauto");
      });

      searchbox.on("blur", function(){
        $(".j_searchwrap").toggleClass("wauto");
      });

      $(document).on("keypress", function(event) {
        if($('.j_searchbox').val()){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
               if(typeof(callback) =="function"){
                callback();
               }
            }
        }
      });
  }
}
var searchbox = new Common.searchbox();
//顶部展开效果
Common.navbar = function(){
  this.init();
};
Common.navbar.prototype = {
  init: function(){
    var me = this; 
    me.nav =$(".j_sitenav");
    me.registerEvent();
  },
    registerEvent: function(){
        var me = this;
        var timer;
        $(".j_linksbox").hover(function() {
            var nav = $(this).find(".j_sitenav");
            $(this).addClass("ng-bar-node-hover");
            nav.show();
        }, function() {
            var nav = $(this).find(".j_sitenav");
            $(this).removeClass("ng-bar-node-hover");
            nav.hide();
        });
        $(".j_sitenav").on("mouseleave", function(){
            var me = $(this);
            var nav = $(this).find(".j_sitenav");
            clearTimeout(timer);
            timer = setTimeout(function() {
                nav.hide();
            }, 200);
        });

    }
}
var navbar = new Common.navbar();
//================== 侧边栏滚动定位 ==================
$(document).ready(function() {
    var a = $,
        b = document,
        c = a(".j_mainContent "),
        d = a(".j_sidebar");
    if (d.length > 0) {
        var e = d.offset().top,
            f = d.find(".anchor-btn"),
            g = function() {
                for (var b = [], c = 0; c < f.length; c++) b.push(a(a(f[c]).attr("href")).offset().top);
                return b
            },
            h = g(),
            i = function(b) {
                for (var c, b = b + 86, d = 0; d < h.length; d++)
                    if (b < h[d + 1]) {
                        c = d;
                        break
                    }
                void 0 == c && (c = d - 1), f.parent("li").find("a").removeClass("on"), a(f[c]).parent("li").find("a").addClass("on")
            },
            j = function(a) {
                a > e && !d.hasClass("tab-fix-top") && (d.addClass("tab-fix-top")), e > a && d.hasClass("tab-fix-top") && (d.removeClass("tab-fix-top"));
                  /*, d.css("width", "auto"))*/
            };
        a(window).on("scroll", function(c) {
            var d = a(b).scrollTop();
            j(d), i(d)
        }), a(window).on("resize", function(e) {
            d.hasClass("tab-fix-top");
            var f = a(b).scrollTop();
            j(f), i(f)
        }), a(".anchor-btn").on("click", function(b) {
            var c = a(this);
            setTimeout(function() {
                f.parent("li").find("a").removeClass("on"), c.parent("li").find("a").addClass("on")
            }, 50)
        });
        var k = a(b).scrollTop();
        j(k)
    }
})
//==================侧边栏点击伸展 ==================
$(".j_sectitle").on("click",function(){
    $(this).parents(".j_secendtitlewrap").siblings().find(".j_subwrap").addClass("hide");
    $(this).parents(".j_secendtitlewrap").siblings().find(".sn-arrow-left").removeClass("on");
    $(this).find(".sn-arrow-left").toggleClass("on");
    $(this).parents(".j_secendtitlewrap").find(".j_subwrap").toggleClass("hide");
});
if($(".j_subwrap").find(".on").length>0){
    $(".j_secendtitlewrap").find(".j_subwrap").addClass("hide");
    $(".j_secendtitlewrap").find(".sn-arrow-left").removeClass("on");
    $(".j_subwrap").find(".on").parents(".j_subwrap").removeClass("hide");
    $(".j_subwrap").find(".on").parents(".j_secendtitlewrap").find(".sn-arrow-left").addClass("on");
}
//==================控制最多字数 ==================
Common.maxlength = function(selector,out,max,min) {
    if(min>max) min = 0;
    var  d = $(selector),
        c = max,
        a = $(out),
        b = d.val();
    var timer;
    d.attr("holder", d.val());
    a.text("5-50字");
    d.bind({
        focusin: function() {
            var g = $(this);
            a.css({color: ""});
            if (g.val() == b) {
                g.val("");
                a.text("5-50字")
            }
            $(this).css({"border-color": "#4c93f3"});
            timer = setInterval(function() {
                var h = $.trim(g.val());
                if (h.length > c) {
                    h = h.substr(0, c);
                    g.val(h)
                }
                if (h.length < min) {
                    a.text("您还需输入" + (min - h.length) + "个字")
                } else {
                    a.text("您还可以输入" + (c - h.length) + "个字")
                }
            }, 100)
        },
        focusout: function() {
            $(this).removeClass("focus");
            if ($(this).val() == "") {
                $(this).val(b);
                a.text("5-50字")
            }
            $(this).css({"border-color": "#DDD"});
            clearInterval(timer)
        }
    });
};
Common.maxlength("#miaosu",".j-limit",50,5);
$(function (){
    //日期显示
    $("#starttime").manhuaDate({               
      handlerClass: ".j_calender1", 
      Event : "click",//可选               
      Left : 0,//弹出时间停靠的左边位置
      Top : -16,//弹出时间停靠的顶部边位置
      fuhao : "-",//日期连接符默认为-
      isTime : false,//是否开启时间值默认为false
      beginY : 2015,//年份的开始默认为1949
      endY :2100//年份的结束默认为2049
    });

});
/**--------------- dateRangePicker ----------------**/
var localopts = {
  "format": "YYYY/MM/DD",
  "separator": " - ",
  "applyLabel": "确定",
  "cancelLabel": "取消",
  "fromLabel": "开始",
  "toLabel": "到",
  "customRangeLabel": "自定义",
  "daysOfWeek": ["日","一","二","三","四","五","六"],
  "monthNames": ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],                          
  "firstDay": 1
};
//日期选择控制
var todayStart = new Date;
todayStart.setHours(0);
todayStart.setMinutes(0);
todayStart.setSeconds(0);
todayStart.setMilliseconds(0)
var todayEnd = new Date(+todayStart + 24 * 3600000 - 1);
var amonth = new Date(+todayStart - 24 * 3600000 * 30);
var threeMonth = new Date(+todayStart - 24 * 3600000 * 90);
var sixMonth = new Date(+todayStart - 24 * 3600000 * 180);
var dateOption = {
    "locale":localopts,
    "timePickerIncrement": 365,
    "ranges": {
        "最近一个月": [amonth, todayEnd],
        "最近三个月": [threeMonth, todayEnd],
        "最近半年": [sixMonth, todayEnd]
    },
    "dateLimit": {
        "days": 365
    },
    "startDate": amonth,
    "endDate": todayEnd,
    "opens": "left",
    "drops": "down",
    "buttonClasses": "btn btn-sm",
    "applyClass": "btn-success",
    "cancelClass": "btn-default"
};
$("#daterangebox").daterangepicker(dateOption, function(start, end, label){ 
});
 
/**--------------- 地址联动 ----------------**/
addressInit('cmbProvince', 'cmbCity', 'cmbArea', '湖北', '武汉市', '武昌区');
addressInit('Select1', 'Select2', 'Select3');
var cityarr = [];
$("#cmbCity").on("change", function(){
  var v = $(this).val();
  for(var i =0;i < cityarr.length; i++){
    if(v==cityarr[i]){ return false; }
  }
  cityarr.push(v); 
  $(".j_sresult").append('<span class="j_cityitem cityitem rounds b pss mrs">'+v+'<a href="javascript:;" class="j_removecity ib c9">x</a></span>');
});
$(".j_removecity").live("click",function(){
  $(this).parent(".j_cityitem").remove();
});
/**---------------数字跳动累加 ----------------**/
function numJump(){
  var oSpan=document.getElementById("oSpan");
  var d=215412;//结束的位置
  var s= 0//起始位置
  var time=2000;  //所用时间 1000毫秒（ 在1秒内 数值增加到d）;
  var outTime=0;  //所消耗的时间
  var interTime=30;
  oSpan.innerHTML = "0";
  var timer = setInterval(function(){
    outTime+=interTime;
    if(outTime<time){
      oSpan.innerHTML= parseInt(d/time*outTime);
    }else{
      oSpan.innerHTML=d;
      clearInterval(timer);
    }
    },interTime);
}
$("#runnumbtn").on("click",function(){
  numJump();
});
/**--------------- tooltip ----------------**/
$('#tooltip1').tipsy({gravity: $.fn.tipsy.autoNS});
/**--- 可伸展slide ---**/
var s = $("#slide2").find('li').length;
if(s > 5 && s < 10){
  $("#slide2").find('li').slice(0, (10-s)).clone(true).appendTo($("#slide2").find(".j_slidewrap"));
}
//创建slide2
var slide2 = new $.slide({
     selector: '#slide2',  //滑动的块 
     src: [],
     alt:[],  
     text: [], 
     fix: true,  //是否固定大小
     width: 1190, //宽
     itemwith: 238,//li的宽度
     height: 355, //高
     images: 5,  //展示图片的格式
     slides: 5,  //每次滑动图片个数
     length: 40, //触屏最小滑动长度
     control: false, //是有控制按钮
     controlwidth:200,
     loop: false, //是否是无缝轮播
     auto: false, //自动轮播
     speed: 300, //滑动速度
     delay: 5000, //滚动间隔
     marginRight: 0
});
$("#j_arrowleft2").on("click",function(){
  slide2.rightMove(checkarrow2); 
});
$("#j_arrowright2").on("click",function(){
  slide2.leftMove(checkarrow2); 
});
$("#slide2").on("mouseenter",function(){
  checkarrow2();
});
$("#slide2").on("mouseleave",function(){
    $("#j_arrowright2").hide();
    $("#j_arrowleft2").hide();
});
var checkarrow2 = function(){
  var i = slide2.getIndex();
  var s = slide2.getSize();
  if(s>5 ){
    if(i===0) {
      $("#j_arrowright2").show();
      $("#j_arrowleft2").hide();
    }
    if(i>0 && (i+5 < s)){
      $("#j_arrowright2").show();
      $("#j_arrowleft2").show();
    }
    if( i+5 === s){
      $("#j_arrowright2").hide();
      $("#j_arrowleft2").show();
    } 
  }
  if(slide2.getLoop()){
      $("#j_arrowright2").show();
      $("#j_arrowleft2").show();
  }
}
$(".j_slidewrap").find("li").hover(function(){
    var me = $(this);
    me.width(476);
    //me.siblings().width(209); 
    if(me.index()%5 > 3){
    me.css({"margin-left":"-238px"});
    } 
},function(){
    var me = $(this);
    me.width(238);
    if(me.index()%5 > 3){
      me.css({"margin-left":"0px"});
    }
}); 
/**数据双向绑定 */
/*
* User Model
* @param {uid} String
*/
function User(uid) {  
  var binder = new util.dataBinder(uid);

  var user = {
    attribute: {},

    // 属性设置器使用数据绑定器pubSub来发布
    set: function(attr_name, val) {
      this.attribute[attr_name] = val;
      binder.publish(uid + ":change", attr_name, val, this);
    },

    get: function(attr_name) {
      return this.attribute[attr_name];
    },

    _binder: binder
  };

  // Model修改变化
  binder.on(uid + ":change", function(event, attr_name, new_val, initiator) {
    if (initiator !== user) {
      user.set(attr_name, new_val);
    }
  });

  return user;
}
// test
var user = new User('test');
user.set("name", "jackie");
</script>
</body>
</html>